<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>flv.js</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
            overflow: hidden;
        }

        video {
            object-fit: fill;
            width: 80%;
            height: 80%;
        }
    </style>
</head>
<body>
<input type="text" id="url" value="rtsp.url">
<button id="play">play</button>
<div class="video-video-div">
    <video id="video"></video>
</div>
</body>
<script type="text/javascript" th:src="@{/static/js/jquery-2.1.4.min.js}"></script>
<script type="text/javascript" th:src="@{/static/js/flv.min.js}"></script>

<script type="text/javascript">
    var videoObject = {
        init: function (id) {
            var self = this;
            this.id = id;
            this.flvPlayer = flvjs.createPlayer({type: 'flv', url: 'http://192.168.0.140/live?port=1935&app=rtmp&stream=rtmp', isLive: true, enableStashBuffer: true}, {});
            this.flvPlayer.attachMediaElement(document.getElementById(id));
            this.flvPlayer.load();
            this.flvPlayer.play();
            this.reLoad = function () {
                self.flvPlayer.unload();
                self.flvPlayer.destroy();
                window.v = videoObject.init(self.id, self.src);
            };
            return this;
        }
    };

    $(function () {
        $("#play").click(function () {
            var src = $("#url").val();
            if ($.trim(src) != "") {
                if (window.v) {
                    window.v.flvPlayer.unload();
                    window.v.flvPlayer.destroy();
                }
                window.v = videoObject.init("video");
            }
        });
    });

</script>
</html>